<template>
  <div class="bg-con">
    <div class="bg-box">
      <div class="left-con">
        <img src="@/assets/img/loginbg.png" alt="" />
      </div>
      <div class="login-box">
        <p>洛宁县大数据产业服务平台</p>
        <!-- <div class="avatar">
        <img src="../../src/assets/img/logo1.png" alt="" />
      </div> -->
        <div>
          <el-form
            :model="loginform"
            :rules="rules"
            class="login-form"
            ref="loginform"
          >
            <el-form-item label="请使用账号密码登录:" prop="username">
              <el-input
                v-model="loginform.username"
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input
                v-model="loginform.password"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-checkbox v-model="checked" class="rememberMe"
              >记住我</el-checkbox
            >
            <el-form-item class="btns">
              <el-button
                type="primary"
                @keyup.native="submit"
                @click="submit('loginForm')"
                class="el-button"
                >登录</el-button
              >
              <!-- <el-button type="info" @click="resetform">重置</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HTTP from "@/service/http";
const Base64 = require("js-base64").Base64;
export default {
  data() {
    return {
      checked: false,
      loginform: {
        username: "admin",
        password: "admin123",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号名称", trigger: "change" },
        ],
        // password: [
        //   { required: true, message: "请输入账号密码", trigger: "change" },
        //   {
        //     min: 6,
        //     max: 6,
        //     message: "长度至少6个字符",
        //     trigger: "change",
        //   },
        // ],
      },
    };
  },

  created() {
    let account = sessionStorage.getItem("username");
    let password = sessionStorage.getItem("password");
    // 如果存在赋值给表单，并且将记住密码勾选
    if (account) {
      this.loginform.username = account;
      this.loginform.passWord = password;
      this.checked = true;
    }

    var _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.submit();
      }
    };
  },
  mounted() {},
  methods: {
    submit() {
      let that = this;
      this.$refs.loginform.validate((valid) => {
        if (!valid) return this.$message.warning("账号密码错误");
        let url = "/login";
        let data = {
          username: that.loginform.username,
          password: that.loginform.password,
        };
        HTTP.post(url, data, (res) => {
          if (res.code !== 200) return this.$message.warning("账号密码错误");
          window.sessionStorage.setItem("token", res.token);
          if (this.checked == true) {
            sessionStorage.setItem("username", this.loginform.username);
            sessionStorage.setItem("password", this.loginform.password);
          }
          console.log(res);
          this.$router.push("/home");
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
/* 渐变边框 */
// .el-input__inner {

// }

.bg-con {
  background-color: #1a2234;
  .bg-box {
    display: flex;
    .left-con {
      margin: 10px 20px;
      width: 40%;
      height: 98vh;
      z-index: 33;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .login-box {
    margin: 0 230px;
    width: 450px;
    height: 450px;
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    p {
      color: #b1cffc;
      font-size: 36px;
      line-height: 0px;
      font-weight: 600;
      text-align: center;
      text-shadow: 0px 0px 5px #0f5dd8;
    }
    .avatar {
      width: 180px;
      height: 180px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      background-color: #fff;
      transform: translate(-50%, -60%);
      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-color: #eee;
      }
    }
    .login-form {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 10px 20px;
      box-sizing: border-box;
    }
  }
}
.el-button {
  width: 410px;
  text-align: center;
  margin: 30px 0;
  background: linear-gradient(139deg, #1fe5e6 0%, #3f96ce 100%);
}
</style>
